<template>
  <el-tabs
    type="border-card"
    :stretch="true"
    :value="active"
    class="sign-in-tabs-limit"
    @tab-click="tabClick">
    <el-tab-pane label="登录" name="sign_in">
      <sign-in-form />
    </el-tab-pane>
    <el-tab-pane label="注册" name="sign_up">
      <sign-up-form />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import SignInForm from '@/views/users/sign_in/sign-in-form';
import SignUpForm from '@/views/users/sign_in/sign-up-form';

export default {
  name: 'sign-in-box', // 登录、注册盒子的标签页切换
  components: { SignInForm, SignUpForm },
  computed: {
    active() { return this.$route.path.split('/')[2]; },
  },
  methods: {
    // 点击标签时，修改url
    tabClick(tab) {
      this.$router.push(`/users/${tab.name}`)
        .catch(() => {}); // 避免报错
    },
  },
};
</script>

<style lang="scss">
.sign-in-tabs-limit {
  max-width: 23.125rem;
  margin-left: auto;
  margin-right: auto;
}
</style>
